<ng-container *ngIf="showPagination">
  <div class="lv-paginator-total-container" *ngIf="lvShowTotal || (lvShowSelected && lvSelected)">
    <!-- 统计信息 -->
    <div class="lv-paginator-total" *ngIf="lvShowTotal">
      {{ 'pageTotal' | i18n: [[lvTotal]] }}
    </div>

    <!-- 已选 -->
    <div  *ngIf="lvShowTotal && (lvShowSelected && lvSelected)">
      <ng-container [ngSwitch]="language">
        <ng-container *ngSwitchCase="'en-us'">
          {{ 'pageComma' | i18n }}&nbsp;
        </ng-container>
        <ng-container *ngSwitchDefault>
          {{ 'pageComma' | i18n }} 
        </ng-container>
      </ng-container>
    </div>
    <div class="lv-paginator-selected" *ngIf="lvShowSelected && lvSelected">
      {{ 'pageSelectRecords' | i18n: [[lvSelected]] }}
    </div>
  </div>

  <!-- 页数选择器 -->
  <div class="lv-paginator-selection">
    <div
      class="lv-paginator-jump-button lv-paginator-icon-button lv-paginator-previous"
      (click)="previousPage()"
      [ngClass]="{ disabled: _isFirstIndex || lvDisabled }"
    >
      <i lv-icon="lv-icon-arrow-prev" [lvDisabled]="_isFirstIndex || lvDisabled"></i>
    </div>

    <!-- 精简页数选择器 -->
    <!-- 默认页数选择器 -->
    <ng-container
      *ngTemplateOutlet="
        _pageSimpleMode ? selectionSimpleTpl : selectionDefaultTpl;
        context: { $implicit: _renderPages, pages: pagesOption }
      "
    ></ng-container>

    <div
      class="lv-paginator-jump-button lv-paginator-icon-button lv-paginator-next"
      (click)="nextPage()"
      [ngClass]="{ disabled: _isLastIndex || lvDisabled }"
    >
      <i lv-icon="lv-icon-arrow-next" [lvDisabled]="_isLastIndex || lvDisabled"></i>
    </div>
  </div>

  <!-- 行数选择下拉 -->
  <div class="lv-paginator-select-trigger" *ngIf="lvShowPageSizeOptions">
    <lv-select
      [lvOptions]="pageSizeListOption"
      [ngModel]="lvPageSize"
      [lvPanelClass]="panelClass"
      (ngModelChange)="_PageSizeChange($event)"
      [lvDisabled]="lvDisabled"
      lvValueKey="label"
      lvSize="small"
    >
      <lv-select-trigger>
        <div lv-overflow>
          {{ lvPageSize }}
          <span>{{ 'pagePerSelectOptions' | i18n }}</span>
        </div>
      </lv-select-trigger>
    </lv-select>
  </div>

  <!-- 跳转 -->
  <div class="lv-paginator-quick-jump" *ngIf="!_pageSimpleMode && lvShowQuickjump">
    <label>{{ 'pageGoto' | i18n }}</label>
    <input
      lv-input
      #numberInput
      [disabled]="lvDisabled"
      (keydown.enter)="gotoPage(numberInput.value, numberInput)"
      (compositionend)="onCompositionend($event,numberInput.value,numberInput)"
      (input)="onInput($event,numberInput.value,numberInput)"
      (blur)="gotoPage(numberInput.value, numberInput)"
    />
  </div>
</ng-container>

<!-- 页数选择器 template -->
<!-- 精简 -->
<ng-template #selectionSimpleTpl let-renderPages let-pages="pages">
  <div class="lv-paginator-selection-simple">
    <lv-select
      class="lv-paginator-number-select"
      [lvOptions]="pages"
      [ngModel]="_showedPageIndex"
      (ngModelChange)="jumpToPage($event)"
      [lvDisabled]="lvDisabled"
      lvValueKey="label"
      [lvVirtualScroll]="pages.length > 10"
      lvSize="small"
    ></lv-select>
    <span class="lv-paginator-deliver">/</span>
    <span class="lv-paginator-total-page">{{ maxIndex }}</span>
  </div>
</ng-template>

<!-- 默认 -->
<ng-template #selectionDefaultTpl let-renderPages let-pages="pages">
  <div class="lv-paginator-selection-default">
    <ng-container *ngTemplateOutlet="paginatorPagesTpl; context: { $implicit: renderPages }"></ng-container>
  </div>
</ng-template>

<ng-template #paginatorPagesTpl let-renderPages>
  <ul class="lv-paginator-pages">
    <!-- 第一页 -->
    <li class="lv-paginator-jump-button lv-paginator-number-button" (click)="jumpToPage(1)" [ngClass]="{ selected: _isFirstIndex }">1</li>

    <ng-container *ngIf="renderStartNum > 2">
      <ng-container *ngTemplateOutlet="numberEllipsis; context: { type: 'prev_5' }"></ng-container>
    </ng-container>

    <ng-container *ngFor="let item of renderPages">
      <li
        class="lv-paginator-jump-button lv-paginator-number-button"
        (click)="jumpToPage(item)"
        [ngClass]="{ selected: lvPageIndex === item - 1 }"
      >
        {{ item }}
      </li>
    </ng-container>

    <ng-container *ngIf="renderEndNum < maxIndex - 1">
      <ng-container *ngTemplateOutlet="numberEllipsis; context: { type: 'next_5' }"></ng-container>
    </ng-container>

    <!-- 最后一页 -->
    <li
      class="lv-paginator-jump-button lv-paginator-number-button"
      (click)="jumpToPage(maxIndex)"
      *ngIf="maxIndex > 1"
      [ngClass]="{ selected: _isLastIndex }"
    >
      {{ maxIndex }}
    </li>
  </ul>
</ng-template>

<ng-template #numberEllipsis let-type="type">
  <li class="lv-paginator-jump-button lv-paginator-ellipsis-button" (click)="quickJump(type)" [ngClass]="{ disabled: lvDisabled }">
    <ng-container [ngSwitch]="type">
      <i *ngSwitchCase="'prev_5'" lv-icon="lv-icon-arrow-double-prev" class="lv-pagination-item-jump-icon"></i>
      <i *ngSwitchCase="'next_5'" lv-icon="lv-icon-arrow-double-next" class="lv-pagination-item-jump-icon"></i>
    </ng-container>
    <span class="lv-pagination-number-ellipsis">•••</span>
  </li>
</ng-template>
